<template>
  <div>
    <div class="f ac xc mb50">
      <Button @click="addItem" class="mr20" type="primary">添加</Button>
      <Button @click="randomItem" class="mr20" type="info">打乱顺序</Button>
      <Button @click="reset" class="mr20" type="error">重置</Button>
    </div>
    <vab-draggable v-bind="dragOptions" :list="arrList">
      <div
        v-for="(item, index) in arrList"
        :key="index"
        :class="['rel mb20 mr20 dib']"
        :style="{width:'200px',height:'200px',background:item.bgColor}"
      >
        <svg @click="delItem(item)" t="1682839072902" class="abs t0 r0" viewBox="0 0 1035 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2332" width="48" height="48"><path d="M972.550494 326.095636c-24.872645-58.823304-60.482966-111.631728-105.828482-156.977244-45.345516-45.345516-98.15394-80.944698-156.977244-105.828482-60.917374-25.763738-125.599617-38.829396-192.253405-38.829396S386.155332 37.526172 325.22682 63.28991c-58.812166 24.872645-111.631728 60.482966-156.977244 105.828482s-80.944698 98.15394-105.828482 156.977244c-25.763738 60.917374-38.829396 125.599617-38.829396 192.253405s13.065657 131.336031 38.829396 192.264543c24.872645 58.812166 60.482966 111.631728 105.828482 156.977244s98.15394 80.944698 156.977244 105.828482c60.917374 25.763738 125.599617 38.829396 192.264543 38.829396s131.336031-13.065657 192.253405-38.829396c58.823304-24.872645 111.631728-60.482966 156.977244-105.828482 45.345516-45.345516 80.944698-98.15394 105.828482-156.977244 25.763738-60.917374 38.829396-125.599617 38.829395-192.264543s-13.065657-131.336031-38.829395-192.253405zM517.491363 923.139364c-223.196624 0-404.779185-181.582561-404.779184-404.779185s181.571422-404.790323 404.779184-404.790323 404.779185 181.582561 404.779185 404.779185-181.582561 404.779185-404.779185 404.779184z m218.62977-560.40865L580.491668 518.360179l155.629465 155.629466c17.398599 17.398599 17.398599 45.612844 0 63.011443-8.699299 8.699299-20.105295 13.054519-31.500152 13.054518s-22.800853-4.355219-31.500153-13.054518L517.491363 581.371623 361.861898 737.001088c-8.699299 8.699299-20.105295 13.054519-31.500152 13.054518s-22.800853-4.355219-31.500153-13.054518c-17.398599-17.398599-17.398599-45.612844 0-63.011443l155.629466-155.629466-155.629466-155.629465c-17.398599-17.398599-17.398599-45.612844 0-63.011443s45.612844-17.398599 63.011444 0L517.502502 455.348736l155.629465-155.629465c17.398599-17.398599 45.612844-17.398599 63.011443 0s17.398599 45.612844 0 63.011443z" p-id="2333" fill="#ffffff"></path></svg>
        {{item.id}}
      </div>
    </vab-draggable>
  </div>
</template>
<script src='./index.js'></script>
<style scoped>
</style>